<template>
<div>
    <el-row :gutter='20'>
        <el-col :span='7'>
            <me-link></me-link>
        </el-col>
        <el-col :span='8' class='box-game-pic'>
            <img src='/static/image/index/game-pic.png'>
        </el-col>
        <el-col :span='9' class='box-newses'>
            <el-tabs>
                <el-tab-pane label='最新'>
                    <ul class='yi-ul'>
                        <li v-for='item in news.list' @click='toNews(item)'>
                            {{item.title_sim}}
                            <span class='date'>{{item.created_at}}</span>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label='新闻'>
                    <ul class='yi-ul'>
                        <li v-for='item in news.list' @click='toNews(item)'>
                            {{item.title_sim}}
                            <span class='date'>{{item.created_at}}</span>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label='公告'>
                    <ul class='yi-ul'>
                        <li v-for='item in news.list' @click='toNews(item)'>
                            {{item.title_sim}}
                            <span class='date'>{{item.created_at}}</span>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label='活动'>
                    <ul class='yi-ul'>
                        <li v-for='item in news.list' @click='toNews(item)'>
                            {{item.title_sim}}
                            <span class='date'>{{item.created_at}}</span>
                        </li>
                    </ul>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
    <br>
    <el-row :gutter='20'>
        <el-col :span='16' class='box-a'>
            <el-row class='box-job-info'>
                <el-col :span='8' class='box-select'>
                    <div class='title'>职业介绍</div>
                    <div class='job-module' v-for='job in jobs'>
                        <div class='module-title'>{{job.module}}</div>
                        <div class='module' v-for='child in job.child'>
                            <div class='cate'>{{child.cate}}</div>
                            <div class='job' v-for='rchild in child.child' 
                                :class='rchild.name == sJob.name ? "active" : ""'
                                @click='selectJob(rchild)'>{{rchild.name}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span='8' class='box-image'>
                    <img :src='sJob.image'>
                </el-col>
                <el-col :span='8' class='box-attr'>
                    <div class='box-img'>
                        <img :src='sJob.image_attr'>
                    </div>
                    <div class='box-tip'>
                        <div class='tip'>
                            <span>使用武器</span>大刀
                        </div>
                        <div class='tip'>
                            <span>职业特征</span>近战外功职业，血高防厚
                        </div>
                        <div class='tip'>
                            <span>团队作战</span>近战外功职业，血高防厚
                        </div>
                    </div>
                </el-col>
            </el-row>
            <br>
            <el-row class='box-show'>
                <el-tabs>
                    <el-tab-pane label='游戏原图'>
                        <el-row :gutter='10' class='box-yuantu'>
                            <el-col :span='12'>
                                <img src='/static/image/index/yuantu-01.png'>
                            </el-col>
                            <el-col :span='6'>
                                <img src='/static/image/index/yuantu-02.png'>
                            </el-col>
                            <el-col :span='6'>
                                <img src='/static/image/index/yuantu-03.png'>
                            </el-col>
                            <el-col :span='6'>
                                <img src='/static/image/index/yuantu-04.png'>
                            </el-col>
                            <el-col :span='6'>
                                <img src='/static/image/index/yuantu-05.png'>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label='截图'>截图</el-tab-pane>
                    <el-tab-pane label='女神照片'>女神照片</el-tab-pane>
                    <el-tab-pane label='视频'>视频</el-tab-pane>
                </el-tabs>
            </el-row>
        </el-col>
        <el-col :span='8'>
            <div class='box-data'>
                <div class='box-title'>
                    <div class='title'>游戏资料</div>
                </div>
                <div class='content'>
                    <el-row class='box-cate' v-for='(item,key) in dataLinks' :key='key'>
                        <el-col :span='6'>
                            <div class='cate'>{{item.cate}}</div>
                        </el-col>
                        <el-col :span='18' class='box-item'>
                            <a @click='toUrl(v.url)' v-for='v in item.links'>{{v.name}}</a>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <br>
            <div class='box-service'>
                <div class='text'><i class='iconfont icon-dianhua'></i>在线客服</div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script type="text/javascript">
import Link from '@/components/utils/Link'
import Common from '@/common/Common'
import Request from '@/common/Request'
import Storage from '@/common/Storage'
import ScrollReveal from 'scrollreveal'
export default {
    data : function(){
        return {
            dataLinks : [
                {
                    'cate' : '背景',
                    'links' : [
                         {
                            'name' : '背景介绍',
                            'url' : '/data/background',
                        },{
                            'name' : '游戏地图',
                            'url' : '/data/background',
                        },{
                            'name' : '基本操作方法',
                            'url' : '/data/BasicOperation',
                        },{
                            'name' : '游戏介绍',
                            'url' : '/data/gameDes',
                        },{
                            'name' : '新手村',
                            'url' : '/data/newHand',
                        },{
                            'name' : '技能系统',
                            'url' : '/data/skill',
                        }
                    ]
                },{
                    'cate' : '玩法',
                    'links' : [
                        {
                            'name' : '任务指引',
                            'url' : '/data/guide',
                        },{
                            'name' : '职业树',
                            'url' : '/data/job-tree',
                        },{
                            'name' : '机甲DIV',
                            'url' : '/data/diy',
                        },{
                            'name' : '一转机甲',
                            'url' : '/data/yi-zhuan',
                        },{
                            'name' : '二转机甲',
                            'url' : '/data/er-zhuan',
                        },{
                            'name' : '资料大全',
                            'url' : '/data/daquan',
                        },{
                            'name' : 'NPC名称及坐标',
                            'url' : '/data/npcdes',
                        }
                    ]
                },{
                    'cate' : '战斗',
                    'links' : [
                        {
                            'name' : '战斗系统',
                            'url' : '/data/fight'
                        }
                    ]
                },
                {
                    'cate' : '特色',
                    'links' : [
                        {
                            'name' : '工会系统',
                            'url' : '/data/sociaty'
                        },{
                            'name' : '房屋系统',
                            'url' : '/data/room'
                        },{
                            'name' : '连击系统',
                            'url' : '/data/lian-ji'
                        }
                    ]
                },{
                    'cate' : '商店',
                    'links' : [
                        {
                            'name' : '游戏商店',
                            'url' : '/data/shop'
                        }
                    ]
                }
            ],
            jobs : [{
                'module' : '习武者',
                'child' : [{
                    'cate' : '武兵',
                    'child' : [{
                        'name' : '龙甲士',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    },{
                        'name' : '赤剑士',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }]
                }, {
                    'cate' : '弓兵',
                    'child' : [{
                        'name' : '神弓手',
                        'image' : '/static/image/index/job-shengongshou.png',
                        'image_attr' : '/static/image/index/job-shengongshou-attr.png'
                    },{
                        'name' : '弩枪手',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }]
                }, {
                    'cate' : '浪人',
                    'child' : [{
                        'name' : '刺客',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    },{
                        'name' : '拳斗士',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }]
                }]
            },{
                'module' : '求仙者',
                'child' : [{
                    'cate' : '方士',
                    'child' : [{
                        'name' : '五行师',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }, {
                        'name' : '阴阳师',
                        'image' : '/static/image/index/job-yinyangshi.png',
                        'image_attr' : '/static/image/index/job-yinyangshi-attr.png'
                    }]
                }, {
                    'cate' : '礼司',
                    'child' : [{
                        'name' : '大祭司',
                        'image' : '/static/image/index/job-dajisi.png',
                        'image_attr' : '/static/image/index/job-dajisi-attr.png'
                    }, {
                        'name' : '乐师',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }]
                }]
            }, {
                'module' : '学徒',
                'child' : [{
                    'cate' : '炼丹士',
                    'child' : [{
                        'name' : '龙甲士',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }, {
                        'name' : '赤剑士',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }]
                },{
                    'cate' : '铸师',
                    'child' : [{
                        'name' : '神弓手',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    },{
                        'name' : '弩枪手',
                        'image' : '/static/image/index/job-longjiashi.png',
                        'image_attr' : '/static/image/index/job-longjiashi-attr.png'
                    }]
                }]
            }],
            sJob : {
                'name' : '龙甲士',
                'image' : '/static/image/index/job-longjiashi.png',
                'image_attr' : '/static/image/index/job-longjiashi-attr.png'
            },
            news : {
                'list' : false,
                'pic': false
            }
        }
    },
    components : {
        'me-link' : Link
    },
    methods : {
        //选择职业
        selectJob : function(item){
            this.sJob = item
        },

        toUrl : function(url){
            console.log(url)
            Common.toUrl(url)
            return true
        },
        getNews : function(){
            var url = Request.createApi('/app/news/list?where[position]=list&page=1&limit=4')
            Request.get(url, res => {
                this.news.list = res.list
            })
        },
        toNews : function(news){
            Storage.set('news', news)
            Common.toUrl('/news/item?id='+news.id)
        },
    },
    mounted : function(){
        var sr = ScrollReveal({
            'origin' : 'bottom',
            'distance' : '20px',
            'duration' : 500,
            'delay' : 400
        })

        sr.reveal('.box-game-pic', {
            delay: 500
        })
        sr.reveal('.box-newses', {
            delay: 600
        })
        sr.reveal('.box-job-info', {
            delay: 500
        })
        sr.reveal('.box-show')
        sr.reveal('.box-data', {
            delay: 600
        })
        sr.reveal('.box-service')
    },
    created : function () {
        this.getNews()
    }
}
</script>